<template>
    <view class="data-v-8166a4b6">
        <block v-if="popMenu && (leftBottom || rightBottom || leftTop || rightTop)">
            <view
                :class="[
                    'uni-fab data-v-8166a4b6',
                    leftBottom ? 'uni-fab--leftBottom' : '',
                    rightBottom ? 'uni-fab--rightBottom' : '',
                    leftTop ? 'uni-fab--leftTop' : '',
                    rightTop ? 'uni-fab--rightTop' : ''
                ]"
                :style="'left:' + styles.leftBox + ';' + ('right:' + styles.rightBox + ';') + ('z-index:' + styles.zIndex + ';')"
            >
                <view
                    :class="[
                        'uni-fab__content data-v-8166a4b6',
                        horizontal === 'left' ? 'uni-fab__content--left' : '',
                        horizontal === 'right' ? 'uni-fab__content--right' : '',
                        direction === 'vertical' ? 'uni-fab__content--flexDirection' : '',
                        flexDirectionStart ? 'uni-fab__content--flexDirectionStart' : '',
                        flexDirectionEnd ? 'uni-fab__content--flexDirectionEnd' : '',
                        !isAndroidNvue ? 'uni-fab__content--other-platform' : ''
                    ]"
                    :style="'width:' + boxWidth + ';' + ('height:' + boxHeight + ';')"
                    elevation="5"
                >
                    <block v-if="flexDirectionStart || horizontalLeft">
                        <view class="uni-fab__item uni-fab__item--first data-v-8166a4b6"></view>
                    </block>
                    <block v-for="(item, index) in content" :key="index">
                        <diy-navigator :url="item.url">
                            <view :class="['uni-fab__item data-v-8166a4b6', isShow ? 'uni-fab__item--active' : '']" @tap="_onItemClick" :data-index="index">
                                <image
                                    class="uni-fab__item-image data-v-8166a4b6"
                                    :src="item.active ? item.selectedIconPath : item.iconPath"
                                    mode="widthFix"
                                    style="width: 90rpx; height: 90rpx"
                                    lazy-load
                                ></image>
                                <!-- <text class="uni-fab__item-text data-v-8166a4b6"
              style="{{'color:'+(item.active?styles.selectedColor:styles.color)+';'}}">{{item.text}}</text> -->
                            </view>
                        </diy-navigator>
                    </block>
                    <block v-if="flexDirectionEnd || horizontalRight">
                        <view class="uni-fab__item uni-fab__item--first data-v-8166a4b6"></view>
                    </block>
                </view>
            </view>
        </block>

        <block v-if="content.length == 1">
            <view
                :class="[
                    'uni-fab__circle uni-fab__plus data-v-8166a4b6',
                    leftBottom ? 'uni-fab__circle--leftBottom' : '',
                    rightBottom ? 'uni-fab__circle--rightBottom' : '',
                    leftTop ? 'uni-fab__circle--leftTop' : '',
                    rightTop ? 'uni-fab__circle--rightTop' : '',
                    !isAndroidNvue ? 'uni-fab__content--other-platform' : ''
                ]"
                :style="'background-color:' + styles.buttonColor + ';' + ('left:' + styles.left + ';') + ('right:' + styles.right + ';') + ('z-index:' + styles.zIndex + ';')"
                data-index="0"
            >
                <diy-navigator :url="content[0].url" style="width: 90rpx; height: 90rpx; border-radius: 90rpx">
                    <image :src="content[0].active ? content[0].selectedIconPath : content[0].iconPath" mode="widthFix" class="fab-circle-h button-icon" lazy-load></image>
                </diy-navigator>
            </view>
        </block>
        <block v-if="content.length > 1">
            <view
                :class="[
                    'uni-fab__circle uni-fab__plus data-v-8166a4b6',
                    leftBottom ? 'uni-fab__circle--leftBottom' : '',
                    rightBottom ? 'uni-fab__circle--rightBottom' : '',
                    leftTop ? 'uni-fab__circle--leftTop' : '',
                    rightTop ? 'uni-fab__circle--rightTop' : '',
                    !isAndroidNvue ? 'uni-fab__content--other-platform' : ''
                ]"
                :style="'background-color:' + styles.buttonColor + ';' + ('left:' + styles.left + ';') + ('right:' + styles.right + ';') + ('z-index:' + styles.zIndex + ';')"
                @tap="_onClick"
            >
                <image v-if="buttonIcon" :src="buttonIcon" class="fab-circle-h button-icon" lazy-load></image>
                <view v-else>
                    <view :class="['fab-circle-v data-v-8166a4b6', isShow ? 'uni-fab__plus--active' : '']" :style="'background-color:' + styles.buttonIconColor + ';'"></view>
                    <view :class="['fab-circle-h data-v-8166a4b6', isShow ? 'uni-fab__plus--active' : '']" :style="'background-color:' + styles.buttonIconColor + ';'"></view>
                </view>
            </view>
        </block>
    </view>
</template>
<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// components/fab/fab.js
// const computedBehavior = require('miniprogram_npm/miniprogram-computed');

export default {
    components: {
        diyNavigator
    },
    data() {
        return {
            fabShow: false,
            isShow: false,

            styles: {
                color: '#3c3e49',
                selectedColor: '#007AFF',
                backgroundColor: '#fff',
                buttonColor: '#3c3e49',
                leftBox: '',
                rightBox: '',
                zIndex: '',
                left: '',
                right: '',
                buttonIconColor: ''
            },

            ios: '',
            // leftBottom: '',
            // rightBottom: '',
            // leftTop: '',
            // rightTop: '',
            // flexDirectionStart: false,
            // flexDirectionEnd: false,
            isAndroidNvue: false,
            // boxWidth: '',
            // boxHeight: '',
            // horizontalLeft: '',
            // horizontalRight: '',
            url: '',
            active: false,
            selectedIconPath: '',
            iconPath: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        pattern: {
            type: Object,
            default: () => ({})
        },
        horizontal: {
            type: String,
            default: 'left'
        },
        vertical: {
            type: String,
            default: 'bottom'
        },
        direction: {
            type: String,
            default: 'horizontal'
        },
        buttonIcon: {
            type: String,
            default: ''
        },
        content: {
            type: Array,
            default: () => []
        },
        show: {
            type: Boolean,
            default: false
        },
        popMenu: {
            type: Boolean,
            default: true
        }
    },
    beforeMount() {},
    mounted() {

        const _this = this;

        uni.getSystemInfo({
            success(res) {
                const ios = !!(res.system.toLowerCase().search('ios') + 1);

                _this.setData({
                    ios: ios
                });
            }
        });
        this.setData({
            isShow: this.show,
            styles: Object.assign({}, this.styles, this.pattern)
        });

        if (this.top === 0) {
            this.setData({
                fabShow: true
            });
        } // 初始化样式
        // this.styles = Object.assign({}, this.styles, this.pattern);
    },
    computed: {
        contentWidth(data) {
			console.log(data);
            return (data.content.length + 1) * 90 + 10 + 'rpx';
        },

        contentWidthMin() {
            return 90 + 'rpx';
        },

        // 动态计算宽度
        boxWidth(data) {
			console.log(data);
            // return this.getPosition(3, 'horizontal');
            return data.isShow && data.direction === 'horizontal' ? data.contentWidth : data.contentWidthMin;
        },

        // 动态计算高度
        boxHeight(data) {
            // return this.getPosition(3, 'vertical');
            return data.isShow && data.direction === 'vertical' ? data.contentWidth : data.contentWidthMin;
        },

        // 计算左下位置0
        leftBottom(data) {
            return data.horizontal === 'left' && data.vertical === 'bottom';
        },

        // 计算右下位置0
        rightBottom(data) {
            // return this.getPosition(0, 'right', 'bottom');
            return data.horizontal === 'right' && data.vertical === 'bottom';
        },

        // 计算左上位置0
        leftTop(data) {
            // return this.getPosition(0, 'left', 'top');
            return data.horizontal === 'left' && data.vertical === 'top';
        },

        rightTop(data) {
            // return this.getPosition(0, 'right', 'top');
            return data.horizontal === 'right' && data.vertical === 'top';
        },

        flexDirectionStart(data) {
            return data.direction === 'vertical' && data.vertical === 'top';
        },

        flexDirectionEnd(data) {
            // return this.getPosition(1, 'vertical', 'bottom');
            return data.direction === 'vertical' && data.vertical === 'bottom';
        },

        horizontalLeft(data) {
            // return this.getPosition(2, 'horizontal', 'left');
            return data.direction === 'horizontal' && data.horizontal === 'left';
        },

        horizontalRight(data) {
            // return this.getPosition(2, 'horizontal', 'right');
            return data.direction === 'horizontal' && data.horizontal === 'right';
        }
    },
    watch: {
        pattern: {
            handler: function (newValue, oldValue) {
                this.setData({
                    styles: Object.assign({}, this.styles, newValue)
                });
            },

            immediate: true,
            deep: true
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        _onClick() {
            this.$emit('fabClick');

            if (!this.popMenu) {
                return;
            }

            console.log(11111111111111); // this.isShow = !this.isShow;

            this.setData({
                isShow: !this.isShow
            });
        },

        open() {
            // this.isShow = true;
            this.setData({
                isShow: true
            });
        },

        close: function close() {
            // this.isShow = false;
            this.setData({
                isShow: false
            });
        },

        /**
         * 按钮点击事件
         */
        _onItemClick(e) {
            console.log(e);
            this.$emit(
                'trigger',
                {
                    detail: {
                        index: e.currentTarget.dataset.index
                    }
                },
                {}
            );
        },

        /**
         * 获取 位置信息
         */
        getPosition: function getPosition(types, paramA, paramB) {
            if (types === 0) {
                return this.horizontal === paramA && this.vertical === paramB;
            } else if (types === 1) {
                return this.direction === paramA && this.vertical === paramB;
            } else if (types === 2) {
                return this.direction === paramA && this.horizontal === paramB;
            } else {
                return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin;
            }
        }
    }
};
</script>
<style lang="scss">
@import './fab.css';
</style>
